<template>
	<view class="video-wrap">
		<video 
			id="myVideo" 
			:src="videoUrl"
			class="video-player"
			:controls="true"
		 
			></video>
		
		<!-- 视频标题 - 移到video后面确保显示在上层 -->
	<!-- 	<cover-view class="video-title">
			<cover-view class="title-text">{{title}}</cover-view>
		</cover-view> -->
		
		<!-- 播放速度控制 - 使用cover-view -->
		<!-- <cover-view class="speed-control" v-if="showSpeedControl">
			<cover-view 
				class="speed-item" 
				v-for="rate in playbackRates" 
				:key="rate"
				:class="{'active': currentRate === rate}"
				@tap="changePlaybackRate(rate)"
			>
				{{rate}}x
			</cover-view>
		</cover-view> -->
		
	<!-- 	<cover-view class="control-bar">
			<cover-view class="speed-btn" @tap="toggleSpeedControl">
				{{currentRate}}x
			</cover-view>
		</cover-view> -->
	</view>
</template>

<script>
export default {
	data() {
		return {
			baseUrl: 'http://shuzisan.suguang.cc:8188/image',
			videoUrl: '',
			title: '视频标题',
			videoContext: "ceshi",
			playbackRates: [0.5, 1.0, 1.25, 1.5, 2.0],
			currentRate: 1.0,
			showSpeedControl: false
		}
	},
	onLoad(options) {
		if (options.videoId) {
			this.videoUrl = `${this.baseUrl}/getVideoById/${options.videoId}`
			//this.videoUrl = decodeURIComponent(options.videoUrl)
		}
		if (options.title) {
			this.title = options.title
		}
	},
	onReady() {
		this.videoContext = uni.createVideoContext('myVideo')
	},
	methods: {
		videoErrorCallback(e) {
			console.error('视频播放错误：', e)
			uni.showToast({
				title: '视频播放出错',
				icon: 'none'
			})
		},
		toggleSpeedControl() {
			this.showSpeedControl = !this.showSpeedControl
		},
		changePlaybackRate(rate) {
			this.currentRate = rate
			this.videoContext.playbackRate(rate)
			this.showSpeedControl = false
		}
	}
}
</script>

<style>
.video-wrap {
	width: 100%;
	height: 100vh;
	background-color: #000;
	position: relative;
}

.video-player {
	width: 100%;
	height: 100vh;
}

/* 修改标题样式 */
.video-title {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	padding: 40rpx 30rpx 20rpx;
	background: linear-gradient(to bottom, rgba(0,0,0,0.7), rgba(0,0,0,0));
	z-index: 999;
}

.title-text {
	color: #fff;
	font-size: 32rpx;
	font-weight: 500;
	line-height: 1.4;
}

.speed-control {
	position: fixed;
	right: 20rpx;
	bottom: 180rpx;
	background: rgba(0, 0, 0, 0.7);
	border-radius: 12rpx;
	padding: 20rpx;
	z-index: 999;
}

.speed-item {
	color: #fff;
	font-size: 28rpx;
	padding: 16rpx 30rpx;
	text-align: center;
	border-radius: 8rpx;
	margin-bottom: 10rpx;
}

.speed-item:last-child {
	margin-bottom: 0;
}

.speed-item.active {
	background: rgba(255, 255, 255, 0.2);
}

.control-bar {
	position: fixed;
	bottom: 100rpx;
	right: 20rpx;
	display: flex;
	align-items: center;
	z-index: 999;
}

.speed-btn {
	background: rgba(0, 0, 0, 0.7);
	color: #fff;
	font-size: 28rpx;
	padding: 12rpx 24rpx;
	border-radius: 8rpx;
}
</style>
